<template>
	<view>
		
		<view class="gt-form-item">
			<view v-if="label" class="gt-form-label-group">
				<view class="row">
					<view class="gt-form-label-left"></view>
					<view class="gt-form-label-required">*</view>
					<view class="gt-form-label">{{label}}</view>
					<uni-icons v-if="desc" class="gt-form-desc" type="help" size="20" color="#999999"
						@click="showDesc()"></uni-icons>
				</view>
			</view>
			<view class="gt-form-body">
				<view class="gt-form-content">
					<!-- 左ICON & 左文字 -->
					<slot name="left">
						<view class="gt-form-content-left">
							<view class="gt-form-content-icon iconfont" :class="leftIcon"></view>
							<!-- <image src="/static/svg/email.svg" style="color: red;" mode="aspectFit" class="w-h-20"></image> -->
							<text class="gt-form-content-text"
								:class="leftIcon && leftText ? 'leftIconTextMargin' : ''">{{leftText}}</text>
						</view>
					</slot>
					<!-- 输入框 -->
					<uni-data-select :disabled="disabled" v-model="selectVal" :localdata="localdataList" @change="change" :placeholder="placeholder"
						:emptyText="'无数据'" ></uni-data-select>
					<!-- 右ICON & 右文字 -->
					<slot name="right">
						<view class="gt-form-content-right" v-if="rightIcon || rightText">
							<text class="gt-form-content-text"
								:class="rightIcon && rightText ? 'rightIconTextMargin' : ''">{{rightText}}</text>
							<view class="gt-form-content-icon iconfont" :class="rightIcon"></view>
						</view>
					</slot>
				</view>
		
				<view v-if="error!== false" class="gt-form-error">{{error}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "gt-select-simple",
		props: {
			value: {
				type: [Number, String],
				default: function() {
					return ''
				}
			},
			list: {
				type: [Array, Object],
				default: function() {
					return [];
				}
			},
			label: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			required: {
				type: [String, Boolean],
				default: ''
			},
			error: {
				type: [String, Boolean],
				default: false
			},
			emptyText: {
				type: String,
				default: '无数据'
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			placeholderClass: {
				type: String,
				default: 'placeholderClass'
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				// default: 'icon-unfold'
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			}
		},
		created() {},
		data() {
			return {
				selectVal:''
			}
		},
		watch: {},
		computed: {
			localdataList() {
				if (!this.list) return [];
				let list = [];
				for(let i in this.list){
					if(this.list[i].key !== undefined){
						list.push({
							text:this.list[i].val,
							value:this.list[i].key,
						});
					}else{
						list.push({
							text:this.list[i],
							value:i,
						});
					}
				}
				this.selectVal = this.value;
				return list;
			}
		},
		methods: {
			change(e) {
				// console.log(e);
				this.selectVal = e;
				this.$emit('input', e,this.field);
			},
			clearValue() {
				// console.log(this.field);
				this.selectVal = '';
				this.$emit('input', '',this.field);
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>